<template>
  <div class="bar" ref="bar"></div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts () {
      let myEcharts = this.$echarts.init(this.$refs.bar)
      let option = {
        title: {
          text: '按需引入'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {
          type: 'value'
        },
        legend: {},
        series: [
          {
            name: '星期',
            type: 'bar',
            data: [23, 33, 45, 56, 78]
          }
        ]
      }
      myEcharts.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.bar {
  width: 400px;
  height: 400px;
}
</style>